<template>
    <div class="welcome-wrapper welcome-quote">
        <el-row align="middle" :gutter="20">
            <el-col :span="8" :xs="24" :offset="0">
                <div class="profile ">
                    <div class="profile-abstract">
                        <el-avatar :size="80" :src="userStore.avatar || '/src/assets/images/profile.jpg'" />
                        <div>
                            <h1>
                                <span style="font-size: 16px;">欢迎：</span> {{ userStore.name }}
                            </h1>
                            <div class="quote">"{{ randomQuote }}"</div>
                        </div>
                    </div>
                    <el-row :gutter="20" class="profile-other">
                        <el-col :span="12" :offset="0">
                            <el-text>
                                登录地区 ： {{ userStore.ipInfo.address }}
                            </el-text>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-text>
                                登录IP ： {{ userStore.ipInfo.ip }}
                            </el-text>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="16" :xs="24" :offset="0" class="message">
                <el-row :gutter="40" class="wrapper-cube">
                    <el-col :span="12" :xl="8">
                        <div class="item">
                            <el-icon size="3em">
                                <Message />
                            </el-icon>
                            <div class="item-content">
                                <div><el-text type="primary">邮箱消息</el-text></div>
                                <div><el-text type="primary" class="count">200</el-text></div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12" :xl="8">
                        <div class="item">
                            <Icon-Plus style="font-size:3em" name="money" />
                            <div class="item-content">
                                <div><el-text type="primary">今日订单</el-text></div>
                                <div><el-text type="primary" class="count">240</el-text></div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12" :xl="8">
                        <div class="item">
                            <Icon-Plus style="font-size:3em" name="ele-user" />
                            <div class="item-content">
                                <div><el-text type="primary">在线用户</el-text></div>
                                <div><el-text type="primary" class="count">240</el-text></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div> 
</template>


<script>
export default {
    title: '欢迎语',
    icon: 'Memo',
    description: '欢迎语录 ',
};
</script>

<script setup name="welcome">

import useUserStore from "@/store/modules/user"
const userStore = useUserStore();


// 定义欢迎语
const welcomeMessage = ref('');

// 鸡汤语列表
const quotes = [
    "成功是由失败堆积而成的。",
    "保持微笑，事情总会变好的。",
    "每一天都是新的开始。",
    "勇敢去追逐你的梦想。",
    "生活是你想象的样子。",
    "今天的努力会成就更好的明天。",
    "笑对人生，一切皆有可能。",
    "简单是生活的精髓。",
    "不要害怕开始，万事开头难。",
    "每一次努力，都是幸运的伏笔。",
    "愿你历经千帆，归来仍是少年。",
    "生活不可能像你想象得那么好，但也不会像你想象得那么糟。",
    "路是自己走出来的，机会是自己争取来的。",
    "山不过来，我就过去；路不平，我就走出新路。",
    "心有多大，舞台就有多大。",
    "今天的你，胜过昨天的自己。",
    "天道酬勤，未来终将属于努力的人。",
    "做最好的自己，不负时光不负梦。",
    "你的坚持，终将成就更好的自己。",
    "只有经历风雨，才能见到彩虹。",
    "行动是通往成功的唯一道路。",
    "用心生活，每一天都有新的收获。",
    "生活本身就是一场值得期待的旅行。",
    "时间会证明你的努力是值得的。",
    "成长是一个蜕变的过程，痛并快乐着。",
    "无论现在多么迷茫，黎明终会到来。",
    "接受不完美，但要全力以赴。",
    "只要心中有光，人生就不会黑暗。",
];


// 随机鸡汤语
const randomQuote = ref('');

// 设置欢迎语
const setGreeting = () => {
    const now = new Date();
    const hour = now.getHours();

    if (hour < 6) {
        welcomeMessage.value = '凌晨好，注意休息';
    } else if (hour < 12) {
        welcomeMessage.value = '早上好';
    } else if (hour < 18) {
        welcomeMessage.value = '下午好';
    } else {
        welcomeMessage.value = '晚上好';
    }

    // 随机选择鸡汤语
    randomQuote.value = quotes[Math.floor(Math.random() * quotes.length)];
};

// 页面挂载时设置欢迎语
onMounted(() => {
    setGreeting();
});
</script>

<style lang="scss" scoped>
.welcome-wrapper {
    border-radius: 5px;
    border: 1px solid darkcyan;
    border:1px solid var(--el-border-color-darker);
    padding: 30px 20px;
    margin-bottom: 10px;
}

.message {
    flex: 1;
}

.wrapper-cube {
    .item {
        cursor: pointer;
        padding: 20px;
        height: 100px;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--el-bg-color-overlay);

        &:hover {
            box-shadow: var(--el-box-shadow);
        }
    }


    .item-content {
        margin-left: auto;
        text-align: center;

        .count.el-text {
            font-size: 30px;
        }
    }
}

.profile {
    display: flex;
    gap: 20px;
    flex-direction: column;

    h1 {
        margin: 0;
    }

    .profile-abstract {
        display: flex;
        gap: 20px;
        align-items: center;
    }
}

.welcome-quote {
    padding: 20px;
    // background: linear-gradient(135deg, #38c4e7, #acb6e5);
    /* 渐变背景 */
    // color: #fff;
    font-family: 'Arial', sans-serif;
    text-align: center;
    border-radius: 8px;
    /* 增加圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* 添加阴影效果 */

    &:hover {
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
        // color: #fff;
        // text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    }
}

.greeting {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 16px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* 文本阴影 */
}

.quote {
    margin-top: 15px;
    font-size: 22px;
    font-style: italic;
    color: #f0f8ff;
    max-width: 600px;
    // margin: 0 auto;
    /* 居中对齐 */
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
</style>